<template>
  <div class="page">
    <div class="fill"></div>
    <div class="top_title">&nbsp;长&nbsp;&nbsp;久&nbsp;&nbsp;未&nbsp;&nbsp;央&nbsp;</div>
    <div class="form_box">
      <mu-form :model="form" class="mu-form" :label-position="labelPosition" label-width="100">
        <mu-form-item :icon="usernameIcon" prop="username" :rules="usernameRules">
          <mu-text-field prop="username" v-model="form.username"></mu-text-field>
        </mu-form-item>
        <br/>
        <mu-form-item :icon="passwordIcon" prop="password" :rules="passwordRules">
          <mu-text-field type="password" prop="username" v-model="form.password"></mu-text-field>
        </mu-form-item>
      </mu-form>
    </div>
    <div class="reg">
      <div class="reg_item">
        <mu-button flat>注册账号</mu-button>
      </div>
      <div class="reg_item">
        <mu-button flat>找回密码</mu-button>
      </div>
    </div>
    <div class="login_btn">
      <mu-button full-width color="primary" @click="test">登录</mu-button>
    </div>
  </div>
</template>

<script>
  export default {
    name: "login",
    computed: {},
    data() {
      return {
        form: {username: '', password: ''},
        labelPosition: 'top',
        usernameIcon: 'person_outline',
        passwordIcon: 'lock',
        userRex: /^[A-Za-z0-9]+$/,
        pwdRex: /^(?![a-z]+$)(?![A-Z]+$)(?![0-9]+$)[0-9a-zA-Z\W]\S{7,20}$/,
        usernameRules: [
          {validate: (user) => user.length >= 5, message: '用户名长度需大于5'},
          {validate: (user) => this.userRex.test(user), message: '用户名格式错误'}
        ],
        passwordRules: [
          {validate: (pwd) => pwd.length >= 5, message: '密码长度需大于5'},
          {validate: (pwd) => this.pwdRex.test(pwd), message: '密码格式错误'}
        ]
      }
    },
    methods: {
      test() {
        const params = {username: '123', password: '123'};
        this.$http('/login', 'put', params)
      }
    }
  }
</script>

<style scoped>
  .page {
    width: 100%;
    height: 100vh;
    background-image: url('../../assets/login.jpg');
    background-size: 100% 100%;
  }

  .form_box {
    width: 80%;
    margin: 80px auto;
  }

  .fill {
    width: 100%;
    height: 1px;
  }

  .top_title {
    width: 80%;
    height: 100px;
    color: #2196f3;
    font-size: 38px;
    text-align: center;
    line-height: 100px;
    margin: 50px auto;
  }

  .mu-form {
    width: 90%;
  }

  .login_btn {
    width: 70%;
    margin: 50px auto;
  }

  .reg {
    width: 70%;
    height: 30px;
    margin: 30px auto;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
  }

  .reg_item {
    width: 50%;
    text-align: center;
  }

</style>
